<template>
    <div class="addPic">
      <el-button type="buttom"
        :style="{padding:'9px',fontSize:'12px',float:'left',marginRight:'10px'}"
        @click="formVisible = true,handleEdit(edit)" >{{ edit?'编辑':'添加图片' }}</el-button>
      <el-dialog title="编辑背景图" :visible.sync=" formVisible" center>
        <el-form
        ref="addpics"
        :model="form"
        :rules="{
          // title:[
          //   {required:true,message:'请填写背景图的相关描述！',trigger:'blur'},
          // ],
          // image:[
          //   {required:true,message:'请上传图片',trigger:'change'},
          // ],
          }">
          <el-form-item label="背景图描述" >
            <el-input v-model="form.title" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="背景图图片" prop="image">
            <el-upload
              class="avatar-uploader"
              action="https://jsonplaceholder.typicode.com/posts/"
              :show-file-list="false"
              :on-success="handleAvatarSuccess"
              :before-upload="beforeAvatarUpload">
              <img v-if="form.mageUrl"  :src="form.mageUrl" class="avatar">
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
            <el-form-item label="图片地址" >
              <el-input v-model="form.mageUrl" autocomplete="off" :style="{width:'88%'}"></el-input>
            </el-form-item>
            <el-button style="margin-right: 10px;background-color: lightskyblue;border:0;float:right" size="small" type="success" @click="submitUpload">上传</el-button>
          </el-form-item>
        </el-form>
      </el-dialog>
    </div>
</template>
<script>
import { Message } from 'element-ui'
export default {
  data() {
    return {
      form: {
        id: '',
        title: '',
        mageUrl: '',
      },
      formVisible: false,
    }
  },
  props: ['edit'],
  methods: {
    onSubmit() {
      console.log(1234567890)
    },
    async submitUpload() {
      const res = await this.$refs.addpics.validate()
      if (res) {
        console.log(this.form)
        this.$emit('add', this.form)
      }
      this.formVisible = false
      this.form = {}
    },
    /**
     * 图片上传成功
     */
    handleAvatarSuccess(response, uploadFile) {
      this.form.mageUrl = URL.createObjectURL(uploadFile.raw)
      console.log('上传图片成功')
    },
    /**
     * 文件上传前拦截处理
     */
    beforeAvatarUpload(rawFile) {
      if (rawFile.type !== 'image/jpeg' && rawFile.type !== 'image/png') { // 文件格式
        console.log(Message.error)
        Message.error('上传文件必须是JPG或PNG格式!')
        return false
      } else if (rawFile.size / 1024 / 1024 > 2) { // 文件大小
        Message.error('文件大小不能超过2MB!')
        return false
      }
      return true
    },
    /**
    * 编辑
    */
    handleEdit() {
      console.log(this.edit)
      if (this.edit) {
        console.log(1235678)
        this.form = this.edit
        this.form.title = this.edit.title
        this.form.mageUrl = this.edit.mageUrl
      } else {
        this.form = {}
      }
    },
  },

}
</script>
<style lang="less" scoped>
/deep/.avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  /deep/.avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  /deep/.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  /deep/.avatar {
    width: 178px;
    height: 178px;
    display: block;
  }

</style>
